<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .header{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px #ccc solid;
            position: relative;
        }
        .header img{
            width: 30px;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .header img.leftimg{
            right: 50px;
        }
        .footer{
            height: 60px;
            width: 100%;
            display: flex;
            position: fixed;
            bottom: 0px;
            border-top: 1px #ccc solid;
        }
        .footer .wrapf{
            flex: 1;
            position: relative;
            display: block;
            color: gray;
            font-size: 13px;
            text-decoration: none;
        }
        .footer .wrapf:hover{
            color: #68cb78;
        }
        .footer img{
            width: 50px;
            height: 40px;;
            position: absolute;
            left: 50%;
            top: 3px;
            transform: translateX(-50%);
        }
        .footer span{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 42px;
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <myheader title="书影音" leftimg='./img/ic_actionbar_search_icon.png' rightimg='./img/ic_create_group_chat_blue.png'></myheader>
        <myheader title="小组" leftimg='./img/ic_actionbar_search_icon.png' rightimg='./img/ic_create_group_chat_blue.png'></myheader>
        <myheader title="我的"  rightimg='./img/ic_settings.png'></myheader>
        <myheader title="广播" leftimg='./img/ic_status_search_user.png' rightimg='./img/ic_create_group_chat_blue.png'></myheader>
        <tabbar></tabbar>
    </div> 
    <template id="h">
        <header class="header">
            {{title}}
            <img :src="rightimg" class="rightimg">
            <img :src="leftimg" class="leftimg">
        </header>
    </template>
    <template id="tabbar">
        <footer class="footer">
            <child-footer text='首页' img='./img/1.png'></child-footer>
            <child-footer text='书影音' img='./img/2.png'></child-footer>
            <child-footer text='广播' img='./img/3.png'></child-footer>
            <child-footer text='小组' img='./img/4.png'></child-footer>
            <child-footer text='我的' img='./img/5.png'></child-footer>
        </footer>
    </template>
    <template id='cf'>
        <a href="#" class="wrapf">
            <img :src="img" >
            <span>{{text}}</span>
        </a>
    </template>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{},
            components:{
                myheader:{
                    template:'#h',
                    props:['title','rightimg','leftimg']
                    },
                tabbar:{
                    template:"#tabbar",
                    components:{
                        childFooter:{
                            template:'#cf',
                            props:['text','img']
                        }
                    }
            }
            }
                
            
        })
    </script>
</body>
</html>